<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-dropdown" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示" style="padding-left:10px">
        <ph-dropdown title="浏览器" trigger="hover" type="dark" @action="onAction" theme="dark">
          <ph-dropdown-item action="chrome" 
            >谷歌</ph-dropdown-item
          >
          <ph-dropdown-item action="firefox" 
            >火狐</ph-dropdown-item
          >
          <ph-dropdown-item action="safari" 
            >苹果</ph-dropdown-item
          >
          <ph-dropdown-item action="ie" 
            >IE</ph-dropdown-item
          >
        </ph-dropdown>
        <ph-dropdown title="浏览器" type="light" @action="onAction" theme="light">
          <ph-dropdown-item action="chrome" 
            >谷歌</ph-dropdown-item
          >
          <ph-dropdown-item action="firefox" 
            >火狐</ph-dropdown-item
          >
          <ph-dropdown-item action="safari" 
            >苹果</ph-dropdown-item
          >
          <ph-dropdown-item action="ie" 
            >IE</ph-dropdown-item
          >
        </ph-dropdown>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
import { PhDropdown, PhDropdownItem, PhTab, PhTabPanel, PhView, PhBlockquote } from "@/index";
import PhToast from 'ph-toast'
import * as Data from "../data/dropdown";
export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    const onAction = (v: string) => {
      PhToast.show(v);
    };
    return { onAction, ...Data };
  },
  components: { PhDropdown, PhDropdownItem, PhTab, PhTabPanel, PhView, PhBlockquote },
});
</script>
